<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
          
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Chat test!</title>
            <script type="text/javascript">
        setInterval("nextMessage()", 200); //update the chart every 200 ms               
         
        function updateMessages(xhr, status, args) {
            if(!args.ok) return;
            $('#chat').append('<div class="msg">[' +args.dateSent+ '] <strong>'+args.user+'</strong>: '+args.text+'</div>');
        }
         
    </script>
    </h:head>

    <h:body>
        <ui:composition template="/templates/layout.xhtml">
      <ui:define name="content">
          <h2>Velkommen</h2>
          <form>
                <h:form prependId="false">
            <h:panelGrid columns="2">
                Name: <p:inputText value="#{messageBean.message.user}"/>
                Text: <p:inputText value="#{messageBean.message.message}"/>
                <p:commandButton type="reset" value="Clear"/>
                <p:commandButton value="Send!" actionListener="#{messageBean.sendMessage}"/>
            </h:panelGrid>
 
            <p:remoteCommand name="nextMessage" actionListener="#{messageBean.firstUnreadMessage}"
                             oncomplete="updateMessages(xhr, status, args);"/>
        </h:form>
             </form>
      </ui:define>
    </ui:composition>
        
        <hr/>
        <h3>Live chat</h3>
        <div id="chat"></div>
    </h:body>
</html>